<template>
    <div class="rightTwo">
        <ThemeTitle :title="title"/>
        <div id="yuanChart"></div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  onMounted,
  ref,
  provide
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const title = provide("title","预案管理");

        function drawChart(){
            var dom = document.getElementById("videoChartOne");
            var myChart = echarts.init(dom);
            let option = {

                    // itemStyle: {
                    //     normal: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    //             offset: 0,
                    //             color: '#157eff'
                    //         }, {
                    //             offset: 1,
                    //             color: '#35c2ff'
                    //         }]),
                    //     },
                    //     shadowBlur: 10
                    // },
                    // textStyle: {
                    //     color: '#333',
                    //     fontSize: 16,
                    //     fontWeight: 600,
                    // },
                    legend: [{
                        formatter: function(name) {
                            return new echarts.format.truncateText(name, 200, '12px', '…');
                        },
                        tooltip: {
                            show: true
                        },
                        selectedMode: 'false',
                        bottom: 20,
                    }],
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    xAxis: {
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        show: false,
                        type: 'value'
                    },
                    series: [{
                        type: 'graph',
                        layout: 'none',
                        // coordinateSystem: 'cartesian2d',
                        // legendHoverLink: false,
                        // hoverAnimation: true,
                        // nodeScaleRatio: false,
                        //建头
                        edgeSymbol: ['circle', 'none'],
                        edgeSymbolSize: [2, 15],
                        edgeLabel: {
                            show: false,
                            normal: {
                                show: true,
                                position: 'middle',
                                textStyle: {
                                    fontSize: 12
                                },
                                formatter: "{c}"
                            }
                        },
                        focusNodeAdjacency: true,
                        roam: true,
                        //圆形上面的文字	
                        label: {
                            normal: {
                                position: "inside",
                                show: true,
                                textStyle: {
                                    fontSize: 12
                                },
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 1,
                                shadowColor: 'none',
                                color: '#ff0000'
                            },
                        },
                        data: [{
                                name: "贷款账户表",
                                symbolSize: 80,
                                x: 80,
                                y: 150,
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#157eff'
                                        }, {
                                            offset: 1,
                                            color: '#35c2ff'
                                        }]),
                                    },
                                    // shadowBlur: 10
                                },
                            }, {
                                name: "块1",
                                symbol: "rect",
                                x: 200,
                                y: 210,
                                symbolSize: [80, 30],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#45D840'
                                        }, {
                                            offset: 1,
                                            color: '#B7FF7D'
                                        }]),
                                    }
                                }
                            }, {
                                name: "块2",
                                symbol: "rect",
                                x: 200,
                                y: 180,
                                symbolSize: [80, 30],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#45D840'
                                        }, {
                                            offset: 1,
                                            color: '#B7FF7D'
                                        }]),
                                    }
                                }
                            }, {
                                name: "块3",
                                x: 200,
                                y: 150,
                                symbol: "rect",
                                symbolSize: [80, 30],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#45D840'
                                        }, {
                                            offset: 1,
                                            color: '#B7FF7D'
                                        }]),
                                    }
                                }
                            }, {
                                name: "块n-1",
                                x: 200,
                                y: 120,
                                symbol: "rect",
                                symbolSize: [80, 30],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#45D840'
                                        }, {
                                            offset: 1,
                                            color: '#B7FF7D'
                                        }]),
                                    }
                                }
                            }, {
                                name: "块n",
                                x: 200,
                                y: 90,
                                symbol: "rect",
                                symbolSize: [80, 30],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#45D840'
                                        }, {
                                            offset: 1,
                                            color: '#B7FF7D'
                                        }]),
                                    }
                                }
                            },
                            //节点B,C,D ....n
                            {
                                name: "机构表",
                                x: 300,
                                y: 250,
                                symbol: "rect",
                                symbolSize: [100, 40],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#ffb402'
                                        }, {
                                            offset: 1,
                                            color: '#ffdc84'
                                        }]),
                                    }
                                }
                            }, {
                                name: "产品表",
                                x: 300,
                                y: 200,
                                symbol: "rect",
                                symbolSize: [100, 40],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#ffb402'
                                        }, {
                                            offset: 1,
                                            color: '#ffdc84'
                                        }]),
                                    }
                                }
                            }, {
                                name: "客户表",
                                x: 300,
                                y: 150,
                                symbol: "rect",
                                symbolSize: [100, 40],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#ffb402'
                                        }, {
                                            offset: 1,
                                            color: '#ffdc84'
                                        }]),
                                    }
                                }
                            }, {
                                name: "合同表",
                                x: 300,
                                y: 100,
                                symbol: "rect",
                                symbolSize: [100, 40],
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#ffb402'
                                        }, {
                                            offset: 1,
                                            color: '#ffdc84'
                                        }]),
                                    }
                                }
                            }, {
                                name: "其他表",
                                x: 300,
                                y: 50,
                                symbol: "rect",
                                symbolSize: [100, 40],
                                itemStyle: {
                                    normal: {
                                        color: echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#ffb402'
                                        }, {
                                            offset: 1,
                                            color: '#ffdc84'
                                        }]),
                                    }
                                }
                            }
                        ],

                        links: [{
                            source: "贷款账户表",
                            value: " ",
                            target: "块1",
                        }, {
                            source: "贷款账户表",
                            value: " ",
                            target: "块2",
                        }, {
                            source: "贷款账户表",
                            value: " ",
                            target: "块3",
                        }, {
                            source: "贷款账户表",
                            value: " ",
                            target: "块n-1",
                        }, {
                            source: "贷款账户表",
                            value: " ",
                            target: "块n",
                        }, {
                            source: "块1",
                            value: " ",
                            target: "机构表",
                        }, {
                            source: "块2",
                            value: " ",
                            target: "产品表",
                        }, {
                            source: "块3",
                            value: " ",
                            target: "客户表",
                        }, {
                            source: "块n-1",
                            value: " ",
                            target: "合同表",
                        }, {
                            source: "块n",
                            value: " ",
                            target: "其他表",
                        }],
                    }]
            };
            myChart.setOption(option);
        }
        onMounted(()=>{
            //drawChart();
        })
        return {
            
        }
    }
}
</script>

<style lang="stylus" scoped>
    .rightTwo
        #yuanChart
            width:100%
            height:vh(250)
            margin-top:vh(20)
            border:1px solid #ddd
        
</style>